<!DOCTYPE HTML>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<meta charset="UTF-8">
	<title>Booking form</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<link rel="stylesheet" href="css/tabs-no-images.css" type="text/css">
	<link rel="stylesheet" href="css/booking_form.css" type="text/css">
	<script type="text/javascript" src="javascript/bookingfrm.js"> </script>
	<script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>

	<script type="text/javascript">
	$(function() {
		$("#submit").click(function(e) {
			if ($("#agree").is(":checked") == false) {
				e.preventDefault();
			} else {
				console.log("test");
				var arrival_query_chunk = "arrival_date=" + urlParams["a_month"] + "/" + urlParams["a_day"] + "/" + urlParams["a_year"];
	 			var departure_query_chunk = "departure_date=" + urlParams["d_month"] + "/" + urlParams["d_day"] + "/" + urlParams["d_year"];
				var query_part = "guest_first_name=" + $("#first_name").val() + "&guest_last_name=" + $("#last_name").val();
				
				if (location.search != "") {
					query_part += "&" + location.search.substring(1);
				}

				document.location.href = "confirmation.html?" + query_part + "&" + arrival_query_chunk + "&" + departure_query_chunk;
			}
		});
		$("#agree").click(function(e) {
			if ($("#agree").is(":checked") == true) {
				$("#submit_button").removeClass('submit_bt_disabled');
				$("#submit_button").addClass('submit_bt_enabled');
			} else {
				$("#submit_button").removeClass('submit_bt_enabled');
				$("#submit_button").addClass('submit_bt_disabled');
			}
		});
	});
	var urlParams;
		function decodeQueryString()
		{
			var hash = window.location.search.substr(1);
			var match,
	        pl     = /\+/g,  // Regex for replacing addition symbol with a space
	        search = /([^&=]+)=?([^&]*)/g,
	        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
	        query  = window.location.search.substring(1);

	        urlParams = {};
	        while (match = search.exec(query))
	        	urlParams[decode(match[1])] = decode(match[2]);
		}
	</script>
</head>
<body onload="decodeQueryString();">
	<div id="header">
		<div class="clearfix">
			<div class="logo">
				<a href="index.html"><img src="images/logo.jpg" alt="LOGO" height="85" width="250"></a>
			</div>
			<ul class="css-tabs">
				<li>
					<a href="contact.html">Contact Us</a>
				</li>
				<li>
					<a href="local_attractions.html">Local Attractions</a>
				</li>
				<li>
					<a href="facilities.html">Facilities</a>
				</li>
				<li>
					<a href="index.html">Home</a>
				</li>
			</ul>
		</div>
	</div>
	<div id="contents">
		<div class="clearfix">
			<div class="sidebar">
				<div>
					<p>
						<ul>
							<li><a href="#ginfo">Guest info</a></li>
							<li><a href="#selfacil">Select Facilities</a></li>
							<li><a href="#payinfo">Payment info</a></li>
						</ul>
					</p>
				</div>
			</div>
			<div class="main_booking">
				<table id="bookingform_table">
					<tr>
						<td>
							<a name="ginfo" />
							<div id = "guestinfo">
								<div id="title">Guest Info</div>
								<table>
									<tbody>
										<tr>
											<td><div class="form_label">Title</div></td>
											<td>
												<select id="perstitle">
													<option value="Mr.">Mr.</option>
													<option value="Ms.">Ms.</option>
													<option value="Mrs.">Mrs.</option>
												</select>
											</td>
										</tr>

										<tr>
											<td><div class="form_label">First Name</div></td>
											<td><input id="first_name" value="" type="text"></td>
										</tr>

										<tr>
											<td><div class="form_label">Last Name</div></td>
											<td><input id="last_name" value="" type="text"></td>
										</tr>

										<tr>
											<td><div class="form_label">Email</div></td>
											<td><input value="" type="text"></td>
										</tr>

										<tr>
											<td><div class="form_label">Phone No.</div></td>
											<td><input value="" type="text"></td>
										</tr>

										<tr>
											<td><div class="form_label">Address</div></td>
											<td><input value="" type="text"></td>
										</tr>
										<tr>
											<td><div class="form_label">ZIP</div></td>
											<td><input value="" type="text"></td>
										</tr>
										<tr>
											<td><div class="form_label">Country</div></td>
											<td>
												<select id="countries">
													<script type="text/javascript"> 
													fill_country_list();
													</script>
												</select>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<a name="selfacil" />
							<div id = "facilities">
								<div id="title">Select Facilities</div>
								<div id="selections">
									<input type="checkbox" value="1">Swimming Pool<br>
									<input type="checkbox" value="2">Golf<br>
									<input type="checkbox" value="3">Gym<br>
									<input type="checkbox" value="4">Spa<br>
									<input type="checkbox" value="5">Car Rental<br>
									<input type="checkbox" value="6">Casino
								</div>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<a name="payinfo" />
							<div id = "paymentinfo">
								<div id="title">Payment Information</div>
								<table>
									<tbody>
										<tr>
											<td><div class="form_label">Card type</div></td>
											<td>
												<select id="cardtype">
													<option value="Visa">Visa</option>
													<option value="MasterCard">MasterCard</option>
													<option value="Maestro">Maestro</option>
												</select>
											</td>
										</tr>

										<tr>
											<td><div class="form_label">Card number</div></td>
											<td><input id="bookingform_input" value="" type="text"></td>
										</tr>

										<tr>
											<td><div class="form_label">Expiration date</div></td>
											<td>
												<table style="width:100%;">
													<tr>
														<td>
															<select id="countries" style="height:1.7em;">
																<script type="text/javascript"> 
																fill_months_nr_list();
																</script>
															</select>
														</td>
														<td>
															<select id="countries" style="height:1.7em;">
																<script type="text/javascript"> 
																fill_years_list();
																</script>
															</select>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<div id="terms_q">
								<input type="checkbox" value="agreement_answer" id="agree">I agree with the terms and conditions<br>
							</id>
						</td>
					</tr>
					<tr>
						<td>
							<div class="submit_bt_disabled" id="submit_button">
								 <a href="#" id="submit">Submit</a>
							</id>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<div id="footer">
		<div id="footnote">
			<div class="clearfix">
				<p>
					© Copyright 2013 Alexandra Ringaile Valery Yasmin. All Rights Reserved.
				</p>
			</div>
		</div>
	</div>
</body>
</html>